//获取分类接口
function getList() {
  $.ajax({
    type: "GET",
    url: "/my/category/list",
    success: function (res) {
      let str = "";
      res.data.forEach((item) => {
        str += `
                <tr>
                    <td>${item.name}</td>
                    <td>${item.alias}</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-xs" id='update' data-id='${item.id}' data-name='${item.name}'data-alias='${item.alias}'>编辑</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id='delate' data-id='${item.id}'>删除</button>
                    </td>
                </tr>
                `;
      });
      $(".layui-table tbody").html(str);
      str = "";
    },
  });
}
getList();

//添加类别弹出框
let index;
$(".title button").on("click", function () {
  index = layer.open({
    type: 1,
    title: "添加类别",
    content: $("#layer-add").html(),
    area: ["500px", "250px"],
  });
  //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数
});

//添加接口
$("body").on("submit", "form.addAlias", function (e) {
  //阻止默认行为preventDefault
  e.preventDefault();
  //获取表单元素serialize
  let data = $(this).serialize();
  $.ajax({
    type: "POST",
    url: "/my/category/add",
    data: data,
    success: function (res) {
      layer.msg(res.message);
      layer.close(index);
      $('form.addAlias')[0].reset()
      getList();
    },
  });
});

//删除接口
$(".layui-table tbody").on("click", "#delate", function () {
  let id = $(this).data("id");
  console.log(id);
  layer.confirm("确认删除么？", { icon: 3, title: "提示" }, function (index) {
    $.ajax({
        type: "GET",
        url: "/my/category/delete",
        data: {
          id: id,
        },
        success: function (res) {
            getList();
            layer.msg(res.message)
        },
      });
    layer.close(index);
  });
});

//编辑接口
let indexUp
$(".layui-table tbody").on("click", "#update", function () {
  let data = $(this).data()
  indexUp = layer.open({
    type: 1,
    title: "添加类别",
    content: $("#layer-update").html(),
    area: ["500px", "250px"],
    // 层弹出后的成功回调方法
    success:function(){
      $("#update-form input[name=name]").val(data.name)
      $("#update-form input[name=alias]").val(data.alias)
      $("#update-form input[name=id]").val(data.id)
      $('#update-form .update-clean').data({
        'name':data.name,
        'alias':data.alias
      })
    }
  });
})
$('body').on('submit','#update-form',function(e){
  e.preventDefault()
  let data = $(this).serialize()
  console.log(data);
  $.ajax({
    type:'POST',
    url:'/my/category/update',
    data:data,
    success:function(res){
      if(res.status === 0){
      layer.msg(res.message)
      layer.close(indexUp)
      getList();
    }
    }
  })
})

//编辑弹出框重置按钮
$('body').on('click','.update-clean',function(e){
  e.preventDefault()
  $("#update-form input[name=name]").val($(this).data('name'))
  $("#update-form input[name=alias]").val($(this).data('alias'))
})
